<template>
	<div class="comment_content">
		<head-back-title :title="title"></head-back-title>
		<el-card>
			<div class="comment-box">
				<el-form :model="commentForm" :rules="commentFormRules" ref="commentForm" label-width="120px">
					<el-form-item label="用户头像:" class="upload-box" prop="headimgurl">
						<el-upload
							:disabled="disabled"
							class="avatar-uploader"
							ref="upload"
							action="fakeaction"
							:show-file-list="false"
							:http-request=" function(res) { return upload(res); } " multipleaccept="image/*" :on-change="headImgChange" > <img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="用户名字:" prop="user_name">
						<el-input v-model="commentForm.user_name" placeholder="请输入名字" clearable :disabled="disabled"></el-input>
					</el-form-item>
				<!-- 	<div class="evaluate-view">
						<el-form-item label="商品评价:" prop="star"><el-rate :disabled="disabled" v-model="commentForm.star" show-text></el-rate></el-form-item>
						<el-form-item label="物流服务评价:" prop="logistics_service">
							<el-rate :disabled="disabled" v-model="commentForm.logistics_service" show-text></el-rate>
						</el-form-item>
						<el-form-item label="服务态度评价:" prop="service_attitude">
							<el-rate :disabled="disabled" v-model="commentForm.service_attitude" show-text></el-rate>
						</el-form-item>
					</div> -->
					<el-form-item label="评论内容:" prop="text">
						<el-input :disabled="disabled" type="textarea" :rows="3" v-model="commentForm.text" placeholder="请输入评论内容" clearable></el-input>
					</el-form-item>
					<el-form-item label="产品评论图:" class="upload-box" prop="">
						<div class="img-upload">
							<div class="img-upload-btns">
								<el-upload :show-file-list="false" :action="`${$domain}api/Upimg/UpImg`" :data="upImage" :on-success="upSuccess" multiple>
									<el-button :disabled="disabled" type="primary" size="small">上传图片</el-button>
								</el-upload>
								<el-button :disabled="disabled" type="danger" size="small" @click="rest">重置</el-button>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="img-upload-imgs-info">
								<div v-for="(data, index) in img_info" :key="index" class="img-upload-imgs-info-box">
									<i class="el-icon-error" @click="delVice(index)"></i>
									<el-image :preview-src-list="img_info_preview" :src="data"></el-image>
								</div>
							</div>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<el-button v-if="type == 1 || type == 2" type="primary" @click="submitForm('commentForm')" style="margin-left: 100px;">保存</el-button>
			<el-button v-if="admin_id == 1 && commentForm.examine_status == 0" type="primary" @click="operate(0)" style="margin-left: 100px;">审核</el-button>
			<el-button v-if="admin_id == 1 && commentForm.examine_status == 0" type="danger" @click="operate(1)" style="margin-left: 40px;">拒绝</el-button>
		</el-card>

		<!-- 拒绝原因弹框 -->
		<el-dialog title="拒绝原因" :visible.sync="remarksDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="remarksForm" :rules="remarksFormRules" ref="remarksForm" label-width="120px">
				<el-form-item label="拒绝原因:" prop="refuse_reason">
					<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remarksForm.refuse_reason"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="remarksDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('remarksForm')">确 定</el-button>
			</span>
		</el-dialog> </div>
</template>

<script>
import md5 from 'md5';
export default {
	data() {
		return {
			type:'',// type 0 详情 1添加 2编辑
			id:'',
			skuid:'',
			disabled: false,
			title: '商品--添加评论',
			upImage: {
				timestamp: Math.round(new Date() * 1000),
				key: localStorage.getItem('token'),
				port: 'pc'
			},
			imageUrl: '',
			img_info: [],
			img_info_preview: [],
			commentForm: {
				user_name: '',
				headimgurl: '',
				text: '',
				type: 1,
			},
			commentFormRules: {
				user_name: [{ required: true, message: '请输入用户名称' }],
				headimgurl: [{ required: true, message: '请上传头像' }],
				text: [{ required: true, message: '请输入评论内容' }],
			},
			remarksDialog: false,
			remarksForm: {
				refuse_reason: ''
			},
			remarksFormRules: {
				refuse_reason: [{ required: true, message: '请输入内容' }]
			},
			admin_id: localStorage.getItem('admin_id') // admin_id 理员 1是总号，2是商家，3是厂家，4财务，5招商，6产品，7仓管 8收费厂家 9.外部招商员
		};
	},
	methods: {
		init() {
			this.type = this.$route.query.type;
			this.id = this.$route.query.id;
			this.skuid = this.$route.query.skuid;
			// type 0 详情 1添加 2编辑
			if (this.type == 0) {
				this.disabled = true;
			}
			if (this.type == 0 || this.type == 2) {
				this.title = '商品--评论详情';
				let data = {
					comment_id: this.id
				};
				this.$http(this.$ApiList.CommentInfo, data).then(res => {
						this.commentForm = res.datas;
						this.imageUrl = res.datas.headimgurl;
						this.img_info = res.datas.img_info;
				});
			} else if (this.type == 1) {
				this.commentForm.goods_id = this.id;
				this.commentForm.sku_id = this.skuid;
			}
		},
		headImgChange(file, fileList) {
			var event = event || window.event;
			var file = event.target.files[0];
			var reader = new FileReader();
			//转base64
			reader.onload = e => {
				this.imageUrl = e.target.result; //将图片路径赋值给src
			};
			reader.readAsDataURL(file);
		},
		// 头像上传
		upload(params) {
			//console.log(params);
			const file = params.file,
				fileType = file.type,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1M');
				return;
			}
			this.commentForm.headimgurl = new FormData();
			this.commentForm.headimgurl.append('file[]', file);
		},
		// 删除评论图
		delVice(index) {
			if (this.disabled) {
				return;
			}
			this.img_info.splice(index, 1);
		},
		// 重置图片
		rest() {
			this.img_info = [];
		},
		// 图片上传成功
		upSuccess(response, file, fileList) {
			// for (let i in fileList) {
			// 	if (fileList[i].response == undefined) {
			// 		this.img_info_preview = [];
			// 		this.img_info = [];
			// 		return;
			// 	}
			// 	this.img_info_preview.push(fileList[i].response.datas[0]);
			// 	this.img_info.push(fileList[i].response.datas[0]);
			// }
			this.img_info_preview.push(file.response.datas[0]);
			this.img_info.push(file.response.datas[0]);
		},
		// 0 审核 1 拒绝
		operate(type) {
			let data = {
				comment_id: this.commentForm.comment_id
			};
			switch (type) {
				case 0:
					this.$http(this.$ApiList.CommentSuccess, data).then(res => {
							this.$layer.msg('操作成功');
					});
					break;
				case 1:
				    this.remarksDialog = true
					this.remarksForm.comment_id = this.commentForm.comment_id;
					break;
			}
		},
		//提交
		confirmClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.CommentRefuse, this.remarksForm).then(res => {
							this.$layer.msg(res.datas);
							this.remarksDialog = false
							this.init()
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		//提交
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					if (this.type == 1) {
						
						this.$http(this.$ApiList.publicUpload, this.commentForm.headimgurl).then(res => {
								this.commentForm.headimgurl = res.datas[0];
								this.commentForm.detail_img = this.img_info.join(',');
								this.$http(this.$ApiList.UpComment, this.commentForm).then(res => {
										this.$layer.msg('提交成功');
										this.goBack();
								});
						});
					} else if (this.type == 2) {
						delete this.commentForm.img_info;
						delete this.commentForm.user_id;
						delete this.commentForm.refuse_reason;
						delete this.commentForm.user_B_id;
						delete this.commentForm.add_time;
						delete this.commentForm.examine_status;
						delete this.commentForm.goods_sn;
						delete this.commentForm.goods_name;
						delete this.commentForm.image_thumb;

						if (this.imageUrl == this.commentForm.headimgurl) {
							this.commentForm.detail_img = this.img_info.join(',');
							this.$http(this.$ApiList.UpdateComment, this.commentForm).then(res => {
									this.$layer.msg('提交成功');
									this.goBack();
							});
						} else {
							this.$http(this.$ApiList.publicUpload, this.commentForm.headimgurl).then(res => {
									this.commentForm.headimgurl = res.datas[0];
									this.commentForm.detail_img = this.img_info.join(',');
									this.$http(this.$ApiList.UpdateComment, this.commentForm).then(res => {
											this.$layer.msg('提交成功');
											this.goBack();
									});
							});
						}
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		// 返回
		goBack() {
			this.$router.go(-1);
		},
		getSign() {
			let data = this.upImage;
			// 获取签名开始
			let obj = 'jjds2020+';
			let newObj = this.objKeySort(data);
			for (let i in newObj) {
				obj += i + '=' + newObj[i] + '&';
			}
			obj = obj.substring(0, obj.length - 1);
			obj += '+jjds2020';
			obj = md5(obj);
			obj = obj.toUpperCase();
			// 获取签名结束
			this.upImage.sign = obj;
		},
		// 参数排序
		objKeySort(obj) {
			var newkey = Object.keys(obj).sort();
			var newObj = {};
			for (var i = 0; i < newkey.length; i++) {
				newObj[newkey[i]] = obj[newkey[i]];
			}
			return newObj;
		}
	},
	created() {
		this.init();
		this.getSign();
	}
};
</script>
<style>
.comment-box {
	width: 700px;
}
.comment-box .evaluate-view .el-form-item {
	display: flex;
	align-items: center;
}
.comment-box .evaluate-view .el-form-item__content {
	margin-left: 0 !important;
}
.comment_content .img-upload {
	display: flex;
}
.comment_content .img-upload-imgs-info {
	width: 100%;
	max-width: 660px;
	border: solid 1px #e5e5e5;
	margin-left: 25px;
	min-height: 390px;
}
.comment_content .img-upload-imgs-info-box {
	position: relative;
}
.comment_content .el-icon-error {
	position: absolute;
	font-size: 20px;
	color: #ef3030;
	right: 5px;
	top: 5px;
	z-index: 1;
	background-color: #fff;
	border-radius: 50%;
	cursor: pointer;
}
.comment_content .el-image {
	width: 100%;
}
</style>
